import '../css/HomeList.css'
import React from 'react';
import { ArrowLeft } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Swiper ,Rate} from 'react-vant'
import image6 from '../image/image6.png'
import image7 from '../image/image7.png'
import image8 from '../image/image8.png'
import image9 from '../image/image9.png'
import image10 from '../image/image10.png'
import image11 from '../image/image11.png'
import image12 from '../image/image12.png'

const PetMedical = () => {
    const [value1, setValue1] = React.useState(3.5);
    const [value2, setValue2] = React.useState(3.5);
    const [value3, setValue3] = React.useState(3.5);
    const navigate = useNavigate();
    const imgs = [
        {
            id: 1, src: 'https://cdn7.axureshop.com/demo/2214224/images/%E9%A6%96%E9%A1%B5/u297.png'
        },
        {
            id: 2, src: 'https://cdn7.axureshop.com/demo/2214224/images/%E9%A6%96%E9%A1%B5/u285.png'
        },
        {
            id: 3, src: 'https://cdn7.axureshop.com/demo/2214224/images/%E9%A6%96%E9%A1%B5/u288.png'
        },
        {
            id: 4, src: 'https://cdn7.axureshop.com/demo/2214224/images/%E9%A6%96%E9%A1%B5/u294.png'
        }
    ]
    const lists = [
        {
            id:1,name:'犬细小',img:image6
        },
        {
            id:2,name:'猫传腹',img:image7
        },
        {
            id:3,name:'莱姆症',img:image8
        },
        {
            id:4,name:'关节脱位',img:image9
        },
        {
            id:5,name:'角膜溃疡',img:image10
        }

    ]
    return (
        <>
            <div className='petMedical-top'>
                <ArrowLeft style={{ fontSize: '24px', color: '#333',marginLeft: '10px' }} onClick={() => {
                    navigate('/layout')
                }} />
                <h2 className='petMedical-title'>医疗</h2>
            </div>
            <Swiper autoplay={3000} className='petMedical-swiper'>
                {
                    imgs.map((item, index) => {
                        return (
                            <Swiper.Item key={index} onClick={() => {
                                navigate(`/lunbo?id=${item.id}`)
                            }}>
                                <img src={item.src} alt="logo" />
                            </Swiper.Item>
                        )
                    })
                }
            </Swiper>
            <div className='petMedical-list'>
                {
                    lists.map((item, index) => {
                        return(
                            <div key={index}>
                                <img src={item.img} alt="logo" />
                                <p>{item.name}</p>
                            </div>
                        )
                    })
                }
            </div>
            <div className='petMedical-wen'>
                <img src={image11} alt="one" width={180} height={90}/>
                <img src={image12} alt="two" width={180} height={90}/>
            </div>
            <h2 style={{marginTop: '10px',marginLeft: '25px'}}>周边医院</h2>
            <div className='petMedical-hospital'>
                <img src="https://cdn8.axureshop.com/demo/2214224/images/%E7%BE%8E%E5%AE%B9/u1468.png" alt="" width={100} height={100}/>
                <div style={{marginLeft: '20px',lineHeight: '25px'}}>
                    <h4>淘气联盟宠物医院</h4>
                    <Rate value={value1} size={15} onChange={setValue1} color='orange' />
                    <p style={{fontSize: '12px',color: '#999'}}>丰台长丰园和顺家园底商B23-89</p>
                    <p style={{fontSize: '12px',color: '#999'}}>3.53km</p>
                </div>
            </div>
            <div className='petMedical-hospital'>
                <img src="https://cdn8.axureshop.com/demo/2214224/images/%E5%8C%BB%E7%96%97/u2382.png" alt="" width={100} height={100}/>
                <div style={{marginLeft: '20px',lineHeight: '25px'}}>
                    <h4>淘气联盟宠物医院</h4>
                    <Rate value={value2} size={15} onChange={setValue2} color='orange' />
                    <p style={{fontSize: '12px',color: '#999'}}>丰台长丰园和顺家园底商B23-89</p>
                    <p style={{fontSize: '12px',color: '#999'}}>3.53km</p>
                </div>
            </div>
            <div className='petMedical-hospital'>
                <img src="https://cdn8.axureshop.com/demo/2214224/images/%E5%AF%84%E5%85%BB/u652.png" alt="" width={100} height={100}/>
                <div style={{marginLeft: '20px',lineHeight: '25px'}}>
                    <h4>淘气联盟宠物医院</h4>
                    <Rate value={value3} size={15} onChange={setValue3} color='orange' />
                    <p style={{fontSize: '12px',color: '#999'}}>丰台长丰园和顺家园底商B23-89</p>
                    <p style={{fontSize: '12px',color: '#999'}}>3.53km</p>
                </div>
            </div>
        </>
    )
}

export default PetMedical;